<template>
  <view class="index-wrapper">
    <view class="index-top">
      <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"
        >首页</view
      >
      <view class="index-bg">
        <u-image
          src="@/static/images/indexbg.png"
          width="750rpx"
          height="400rpx"></u-image>
      </view>
    </view>
    <!-- 登陆条 -->
    <view class="login-bar main-pd">
      <u-cell-group :border="false">
        <u-cell :border="false" isLink>
          <template #icon>
            <u-image
              src="@/static/images/icon10.png"
              width="32rpx"
              height="26rpx"></u-image>
          </template>
          <template #title>
            <view class="u-flex" @click="goUrl('/pagesB/dzyz/dzyz')">
              <text class="font-28">业主电子卡：</text>
              <text class="color-f34b47 font-28">{{ cardName }}</text>
            </view>
          </template>
        </u-cell>
      </u-cell-group>
    </view>
    <!-- 菜单 -->
    <view class="menu-list">
      <u-grid :border="false" :col="4">
        <u-grid-item
          v-for="(item, index) in menuList"
          @click="goUrl(item.url)"
          :index="index"
          :key="index">
          <view class="grid-item-box" style="background-color: #fff">
            <image :src="item.icon" class="icon" />
            <text class="text">{{ item.name }}</text>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
    <!-- 公告 -->
    <view class="notice-bar main-pd">
      <u-cell-group :border="false">
        <u-cell :border="false" isLink>
          <template #value>
            <text @click="goUrl('/pagesA/tzgg/tzgg')">更多</text>
          </template>
          <template #icon>
            <u-image
              src="@/static/images/icon9.png"
              width="67rpx"
              height="59rpx"></u-image>
          </template>
          <template #title>
            <u-notice-bar
              bgColor="#fff"
              color="#333"
              :text="noticeText"
              :url="noticeUrl"></u-notice-bar>
            <!-- <view class="notice-title"></view> -->
          </template>
        </u-cell>
      </u-cell-group>
    </view>
    <!-- 活动参与 -->
    <view class="actity-con main-pd">
      <u-cell-group :border="false">
        <u-cell
          :border="false"
          isLink
          value="更多"
          @click="$u.route('/pages/hdcy/hdcy')">
          <template #title>
            <view class="active-title">活动参与</view>
          </template>
        </u-cell>
      </u-cell-group>
      <view class="active-list">
        <view class="active-item" v-for="item in activeList" :key="item.id">
          <view class="u-flex">
            <view class="u-m-r-26">
              <u-image
                :src="item.pics"
                width="220rpx"
                height="146rpx"
                radius="9rpx"></u-image>
            </view>
            <view class="u-flex-grow">
              <view class="title u-line-1">{{ item.title }}</view>
              <view class="u-flex u-flex-between">
                <view :class="[statusClass(item.state), 'status']">{{
                  activeStatus(item.state)
                }}</view>
                <view
                  class="color-bfbfbf font-24"
                  @click="
                    $u.route('/pages/hdcy/hdcyDetail?id=' + item.activityId)
                  "
                  >查看详情
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 红色物业 -->
    <view class="main-pd u-m-t-36" @click="goHswy">
      <u-image
        src="@/static/images/banner1.png"
        width="686rpx"
        height="190rpx"></u-image>
    </view>
    <!-- 政策法规 -->
    <view class="role-con main-pd u-m-t-20">
      <u-cell-group :border="false">
        <u-cell
          :border="false"
          isLink
          value="更多"
          @click="goUrl('/pagesB/zcfg/zcfg')">
          <template #title>
            <view class="active-title">政策法规</view>
          </template>
        </u-cell>
      </u-cell-group>
      <view class="role-list">
        <view
          class="role-item"
          v-for="item in roleList"
          :key="item.id"
          @click="$u.route('/pagesB/zcfg/zcfgDetail?id=' + item.id)">
          <view class="font-32 color-333 line-h-48 u-line-1">{{
            item.title
          }}</view>
          <view class="u-flex u-flex-end u-p-t-21">
            <view class="color-8c8c8c font-28">{{
              $u.timeFormat(item.createTime, "yyyy-mm-dd")
            }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 红黑榜 -->
    <view class="hhb-con main-pd">
      <view class="tab-con" @click="goUrl('/pagesA/hbxx/hbxx')">
        <u-image
          src="@/static/images/tabbg1.png"
          width="325rpx"
          height="129rpx"></u-image>
        <view class="tab-msg">
          <view class="tab-title"> 红榜信息 </view>
          <u-image
            src="@/static/images/icon11.png"
            width="32rpx"
            height="32rpx"></u-image>
        </view>
      </view>
      <view class="tab-con" @click="goUrl('/pagesA/hbxx2/hbxx')">
        <u-image
          src="@/static/images/tabbg2.png"
          width="325rpx"
          height="129rpx"></u-image>
        <view class="tab-msg">
          <view class="tab-title"> 黑榜信息 </view>
          <u-image
            src="@/static/images/icon11.png"
            width="32rpx"
            height="32rpx"></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive, computed } from "vue";
import useInfoStore from "@/store/user";
import {
  getNoticeListApi,
  getzcfgListApi,
  getactivelistApi,
} from "@/api/index";
const userStore = useInfoStore();
import config from "@/config";
import activeIcon from "../../static/images/active.jpg";
let cardName = ref("");
let statusBarHeight = ref(0);
// 菜单列表
let menuList = reactive([
  {
    name: "一键报修",
    icon: "../../static/images/icon1.png",
    url: "/pages/ykbx/ykbx?islogin=true",
  },
  {
    name: "我要投诉",
    icon: "../../static/images/icon2.png",
    url: "/pages/wyts/wyts?islogin=true",
  },
  {
    name: "我的诉求",
    icon: "../../static/images/icon3.png",
    url: "/pages/wdsq/wdsq?islogin=true",
  },
  {
    name: "在线缴费",
    icon: "../../static/images/icon4.png",
    url: "/pagesB/zxjf/zxjf?islogin=true",
  },
  {
    name: "维修基金",
    icon: "../../static/images/icon5.png",
    url: "/pagesB/wxjj/wxjj?islogin=true",
  },
  {
    name: "调查问卷",
    icon: "../../static/images/icon6.png",
    url: "/pagesA/dcwj/dcwj?islogin=true",
  },
  {
    name: "我的物业",
    icon: "../../static/images/icon7.png",
    url: "/pagesA/wdwy/wdwy?islogin=true",
  },
  {
    name: "业主自治",
    icon: "../../static/images/icon8.png",
    url: "/pagesB/yzzz/yzzz?islogin=true",
  },
]);
// 跳转路由
const goUrl = (url) => {
  uni.navigateTo({ url });
};
const goHswy = () => {
  uni.$u.route("/pagesA/hswy/wyList");
};
// 活动状态判断
const activeStatus = computed((status) => {
  return function (status) {
    let statusArr = ["活动未开始", "活动进行中", "活动已结束"];
    return statusArr[status];
  };
});
const statusClass = computed((status) => {
  return function (status) {
    return "status" + status;
  };
});
// 政策法规
let roleList = ref([]);
const getzcfgListHandle = () => {
  getzcfgListApi({
    page: 1,
    limit: 3,
  }).then((res) => {
    if (res.success) {
      roleList.value = res.data;
    }
  });
};
let activeList = ref([]);
// 活动参与
const getactivelistHandle = () => {
  getactivelistApi({
    page: 1,
    limit: 3,
    deptId: userStore.deptId,
    dzyzkId: userStore.dzyzkId,
  }).then((res) => {
    if (res.success) {
      activeList.value = res.data;
      activeList.value.forEach((item, index) => {
        let picArr = JSON.parse(item.pics);
        item.pics = picArr.length
          ? config.baseUrl + picArr[0].fileurl
          : activeIcon;
      });
    }
  });
};
// 获取通知公告
let noticeText = ref("");
let noticeUrl = ref("");
const getNoticeHandle = () => {
  getNoticeListApi({ page: 1, limit: 1, deptId: userStore.deptId }).then(
    (res) => {
      if (res.success) {
        let data = res.data;
        noticeText.value = data[0].title;
        noticeUrl.value = "/pagesA/tzgg/tzggDetail?id=" + data[0].noticeId;
      }
    }
  );
};
onLoad(() => {
  // 设置标题位置
  let btnMSg = uni.getMenuButtonBoundingClientRect();
  statusBarHeight.value = btnMSg.top + btnMSg.height / 6;
  getNoticeHandle();
  getzcfgListHandle();
});
onShow(() => {
  if (userStore.dzkName) {
    cardName.value = `${userStore.dzkName}(${userStore.louNumber}号楼${userStore.dyNumber}单元${userStore.fjNumber}号)`;
  } else {
    cardName.value = "您尚未选择，点击此处选择！";
  }
  getactivelistHandle();
});
</script>

<style lang="scss" scoped>
.index-wrapper {
  .index-top {
    position: relative;
    height: 400rpx;

    .statusBar {
      text-align: center;
      color: #fff;
      font-size: 34rpx;
      font-weight: 500;
    }

    .index-bg {
      ::v-deep.u-image {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
      }
    }
  }

  .login-bar {
    background-color: #fff;
    height: 78rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;

    ::v-deep.u-cell__body {
      padding: 0;
    }
  }

  .menu-list {
    background-color: #fff;
    margin-top: 20rpx;

    .text {
      font-size: 28rpx;
      margin-top: 19rpx;
      color: #333;
    }

    .grid-item-box {
      flex: 1;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      background-color: transparent !important;

      .icon {
        width: 86rpx;
        height: 86rpx;
      }
    }

    .grid-item-box-row {
      flex: 1;
      // position: relative;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
    }
  }

  .notice-bar {
    background-color: #fff;
    margin: 20rpx 0;
    height: 108rpx;
    display: flex;
    align-items: center;

    ::v-deep.u-cell__body {
      padding: 0;
    }

    .notice-title {
      font-size: 28rpx;
      color: #333;
      display: flex;
      align-items: center;

      &::before {
        content: "";
        display: inline-block;
        width: 2rpx;
        height: 52rpx;
        background-color: #f0f0f0;
        margin: 0 24rpx;
      }
    }
  }

  .actity-con {
    background-color: #fff;
    padding-top: 32rpx;

    .active-item {
      border-bottom: 1rpx solid #f0f0f0;
      padding-bottom: 48rpx;
      margin-top: 32rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        padding: 7rpx 0 58rpx 0;
      }

      .status {
        width: 132rpx;
        height: 40rpx;
        border-radius: 6rpx;
        font-size: 22rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .status0 {
        background-color: #f0f0f0;
        color: #595959;
      }

      .status1 {
        background-color: #edf9e8;
        color: #52c41a;
      }

      .status2 {
        background-color: #ffedee;
        color: #ff4d4f;
      }
    }
  }

  ::v-deep.u-cell__body {
    padding: 0;
  }

  .active-title {
    font-size: 36rpx;
    color: #333;
    font-weight: bold;
  }

  .role-con {
    background-color: #fff;
    padding-top: 32rpx;

    .role-list {
      padding-top: 30rpx;

      .role-item {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 28rpx;
        padding-top: 15rpx;
      }
    }
  }

  .hhb-con {
    display: flex;
    justify-content: space-between;
    padding-bottom: 76rpx;

    .tab-con {
      position: relative;
      width: 325rpx;
      height: 129rpx;
      margin-top: 26rpx;

      .tab-msg {
        width: 100%;
        position: absolute;
        top: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 26rpx;
        box-sizing: border-box;
      }

      .tab-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
</style>
